<route lang="json5" type="home">
  {
    layout: 'tabbar',
    style: {
      navigationStyle: 'custom',
      navigationBarTitleText: '物业首页',
    },
  }
</route>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 该页面所需的数据
const waterChart = ref(null)
const powerChart = ref(null)

// 添加消息通知数据
const noticeMessages = ref([
  {
    text: '7号楼501室水表异常，请及时检查处理',
    prefix: 'warn-bold',
  },
  {
    text: '明日上午9:00-11:00将进行小区供电系统维护，请提前做好准备',
    prefix: 'warn-bold',
  },
  {
    text: '本月物业费收缴工作即将开始，请通知各住户按时缴费',
    prefix: 'warn-bold',
  },
])

onMounted(() => {
})
</script>

<template>
  <view class="h-screen flex flex-col">
    <!-- Header -->
    <view class="pt-16 text-white shadow-md" style="background: linear-gradient(222deg, #3D6670 30%, #00C3FE 174%)">
      <view class="px-6 pt-6">
        <view class="text-2xl font-bold">
          Hello, {{ userStore.userInfo.username }}!
        </view>
        <view class="mt-1 text-sm opacity-80">
          What controls do you want to manage today?
        </view>
      </view>

      <wd-grid :column="4" :border="false" clickable bg-color="transparent">
        <wd-grid-item use-slot url="/pages-admin/admin/bind/index" link-type="navigateTo">
          <view class="flex flex-col items-center justify-center py-2">
            <!-- <wd-icon name="apple-filled" size="22px" /> -->
            <image src="/static/images/icon_9.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
            <view class="mt-2 text-xs text-white">
              绑定链接
            </view>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot url="/pages-admin/admin/recharge/index" link-type="navigateTo">
          <view class="flex flex-col items-center justify-center py-2">
            <!-- <wd-icon name="apple-filled" size="22px" /> -->
            <image src="/static/images/icon_10.png" mode="widthFix" class="h-[48rpx] w-[30rpx]" />
            <view class="mt-2 text-xs text-white">
              缴费充值
            </view>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot url="/pages-admin/admin/repair/index" link-type="navigateTo">
          <view class="flex flex-col items-center justify-center py-2">
            <!-- <wd-icon name="apple-filled" size="22px" /> -->
            <image src="/static/images/icon_11.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
            <view class="mt-2 text-xs text-white">
              维修
            </view>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot url="/pages-admin/admin/statistics/index" link-type="navigateTo">
          <view class="flex flex-col items-center justify-center py-2">
            <!-- <wd-icon name="apple-filled" size="22px" /> -->
            <image src="/static/images/icon_12.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
            <view class="mt-2 text-xs text-white">
              数据报告
            </view>
          </view>
        </wd-grid-item>
      </wd-grid>
    </view>

    <scroll-view :scroll-y="true" class="flex-1 bg-gray-50 pb-20">
      <!-- Main Actions Grid -->
      <view class="pb-2">
        <wd-grid :column="4" :border="false" clickable>
          <wd-grid-item use-slot url="/pages-admin/admin/warning/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_5.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs">
                预警提示
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-admin/admin/remoteControl/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_13.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs">
                远程控制
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot link-type="navigateTo" url="/pages-admin/admin/message/index">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_7.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs">
                通知编辑
              </view>
            </view>
          </wd-grid-item>
          <wd-grid-item use-slot url="/pages-admin/admin/operationHistory/index" link-type="navigateTo">
            <view class="flex flex-col items-center justify-center py-2">
              <!-- <wd-icon name="apple-filled" size="22px" /> -->
              <image src="/static/images/icon_8.png" mode="widthFix" class="h-[48rpx] w-[48rpx]" />
              <view class="mt-2 text-xs">
                操作历史
              </view>
            </view>
          </wd-grid-item>
        </wd-grid>
      </view>

      <!-- 消息通知栏 -->
      <view class="notice-section">
        <wd-notice-bar
          v-for="(notice, index) in noticeMessages"
          :key="index"
          :text="notice.text"
          type="warning"
          :prefix="notice.prefix"
          scrollable
        />
      </view>
    </scroll-view>
  </view>
</template>
